<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Mysite</title>
		<style type="text/css">
			.header,.main,.footer{
				width: 500px;
				
			}
			.header,.footer{
				height: 100px;
				background: pink;
			}
			.main{
				background: blue;
			}
			.left,.right{
				width: 100px;
				height: 300px;
			}
			.left{
				background: orange;
				float: left;
			}
			.content{
				width:300px;
				height: 300px;
				background: yellow;
				float: left;
			}
			.right{
				background: green;
				float:right;
			}
			.content-top,.content-bot{
				height: 150px;
			}
			.content-top{
				background: #660000;
			}
			.content-bot{
				background: #000066;
			}
			.clearfix:after{
				content: ".";
				display: block;
				height: 0;
				line-height: 0;
				visibility: hidden;
				clear:both;
			}
			.clearfix{
				zoom:1;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="main clearfix">
			<div class="left"></div>
			<div class="content">
				<div class="content-top"></div>
				<div class="content-bot"></div>
			</div>
			<div class="right"></div>
		</div>
		<div class="footer"></div>
		
	</body>
</html>